<template>
  <div class="uploading-page">
    <el-upload
      class="avatar-uploader"
      name="image"
      :headers="imgHearders"
      action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
      :on-success="imgSuccess"
      :show-file-list="false">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'Uploading',
  props: ['imageUrls'],
  data () {
    return {
      // 预览图片地址
      imageUrl: this.imageUrls,
      // 请求路径
      // imgActionUrl: ,
      // 请求头
      imgHearders: {
        Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('myToken')).token
      }
    }
  },
  watch: {
    imageUrls (newUrl, oldUrl) {
      this.imageUrl = newUrl
    }
  },
  methods: {
    // 文件上传成功之后的函数
    imgSuccess (response) {
      this.imageUrl = response.data.url
      this.$message.success('添加素材成功！')
      this.$emit('on-imgSuccess', response.data.url)
    }
  }
}
</script>

<style>

</style>
